<template>
  <view class="page">
    <!-- transparent -->
    <!-- headBackground || defaultHeadBackground -->

    <view class="page-head">
      <u-navbar
        title="我的"
        :fixed="true"
        :placeholder="true"
        bgColor="transparent"
        :autoBack="false"
        :titleStyle="{ color: '#000' }"
        leftIconColor="transparent"></u-navbar>
    </view>

    <view class="page-top-bg">
      <image
        class="head-bg"
        src="@/static/image/bg.png"
        mode="aspectFill"></image>
    </view>

    <view class="page-ctx">
      <view class="ctx-inner">
        <!-- <w_fill_block height="124" hasStatusBar></w_fill_block> -->

        <view class="user-info">
          <!-- 未登录 -->
          <view v-if="!vuex_is_login" class="user-box" @click="toUser()">
            <view class="avatar-box">
              <image :src="vuex_avatar_default" class="avatar" mode=""></image>
            </view>
            <view class="info-no-login">登录/注册</view>
          </view>

          <!-- 已登录 -->
          <view v-else class="user-box" @click="toUser()">
            <view class="avatar-box">
              <image
                class="avatar"
                :src="mix_user_avatar"
                mode="aspectFill"></image>
            </view>

            <view class="info-box">
              <view class="title-box">
                <view class="name flex">
                  <view class="">{{ mix_user_nick || "设置昵称" }}</view>
                  <view class="md" v-if="type == 1">门店</view>
                </view>
                <!-- <view class="level-marker">
									<image src="@/static/vip/vip-level-marker.png" mode="" class="level-image"></image>
								</view> -->
                <!-- <view class="level-title">
									{{vuex_user.levelTitle}}
								</view> -->
                <!-- <view class="user-role fit-text" v-if="!is_youke">
									用户会员级别
								</view> -->
              </view>
              <view class="mobile">
                {{ mix_user_phone }}
              </view>
            </view>
            <view class="column-flex-center qrcode" v-if="type == 0">
              <image src="/static/image/qrcode.png" mode="aspectFit"></image>
              <view class="">学生码</view>
            </view>
          </view>
        </view>
        <template v-if="type == 0">
          <view class="bottom-box">
            <!-- 宫格导航  -->
            <view class="box-item">
              <view class="box-title flex-between">
                <view class="title-text">我的订单</view>
                <view
                  class="title-button flex-center"
                  @click="toRoute('/order-list')">
                  <text>全部</text>
                  <image src="@/static/my/arrow.png" mode=""></image>
                </view>
              </view>

              <view class="nav-box-row nav-box-row-5">
                <view
                  class="nav-item"
                  v-for="(item, index) in order_navs"
                  :key="index"
                  @click="toNav(item)">
                  <view class="icon-box">
                    <view class="num-info" v-if="numberInfo[item.numKey]">
                      {{ numberInfo[item.numKey] }}
                    </view>
                    <image
                      class="icon"
                      :src="item.icon"
                      mode="widthFix"></image>
                  </view>
                  <view class="nav-title">
                    {{ item.title }}
                  </view>
                </view>
              </view>
            </view>
            <view class="box-item flex">
              <view
                class="s-box column-flex-center"
                v-for="(item, index) in s_navs"
                :key="index"
                @click="goPage(index, 0)">
                <image :src="item.icon" mode="aspectFit"></image>
                <view class="">{{ item.title }}</view>
              </view>
            </view>
            <view class="box-item">
              <view class="nav-box-row nav-box-row-4">
                <view
                  class="nav-item"
                  v-for="(item, index) in other_navs"
                  :key="index"
                  @click="toNav(item)">
                  <view class="icon-box">
                    <image
                      class="icon"
                      :src="item.icon"
                      mode="widthFix"></image>
                  </view>
                  <view class="nav-title">
                    {{ item.title }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </template>
        <template v-else>
          <view class="bottom-box">
            <view class="box-item flex">
              <view
                class="s-box m-box column-flex-center"
                v-for="(item, index) in m_navs"
                :key="index"
                @click="goPage(index, 1)">
                <image :src="item.icon" mode="aspectFit"></image>
                <view class="">{{ item.title }}</view>
              </view>
            </view>
            <view class="box-item flex">
              <view
                class="s-box column-flex-center"
                v-for="(item, index) in m_list"
                :key="index"
                @click="toNav(index, 2)">
                <image :src="item.icon" mode="aspectFit"></image>
                <view class="">{{ item.title }}</view>
              </view>
            </view>
          </view>
        </template>
        <view class="out" @click="show = true">退出账号</view>
      </view>
    </view>

    <!-- <page-footer current="我的"></page-footer> -->
    <avatar_nick_pop ref="avatar_nick_pop" @confirm="confirmAvatarNick" />
    <kefu_pop ref="kefu_pop" />
    <view class="" v-if="show">
      <u-popup
        :show="true"
        :round="10"
        mode="center"
        @close="() => (show = false)">
        <view class="pop-wrap">
          <view class="pop-t">是否退出当前账号？</view>
          <view class="pop-btn flex-between">
            <view class="" @click="() => (show = false)">取消</view>
            <view class="" @click="() => (show = false)">确认</view>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import avatar_nick_pop from "@/components/login/avatar_nick_pop.vue";
import kefu_pop from "@/components/my/kefu_pop.vue";

export default {
  components: {
    avatar_nick_pop,
    kefu_pop,
  },
  data() {
    return {
      defaultHeadBackground: "transparent",
      headBackground: "rgba(255,255,255,0)", //控制顶部标题栏颜色 默认透明颜色 transparent

      show_top_bg: false,
      info: {},
      id: "",
      numberInfo: {}, //订单数量汇总

      order_navs: [
        {
          title: "待付款",
          numKey: "orderNeedPay",
          icon: require("@/static/image/1.png"),
          route: "/order-list",
          query: {
            status: 1,
          },
        },
        {
          title: "待自提",
          numKey: "orderNeedDelivery",
          icon: require("@/static/image/2.png"),
          route: "/order-list",
          query: {
            status: 2,
          },
        },

        {
          title: "待评价",
          numKey: "orderNeedComment",
          icon: require("@/static/image/3.png"),
          route: "/order-list",
          query: {
            status: 6,
          },
        },
        {
          title: "已完成",
          numKey: "orderNeedShouhuo",
          icon: require("@/static/image/4.png"),
          route: "/order-list",
          query: {
            status: 3,
          },
        },
        {
          title: "售后",
          numKey: "orderRefundNum",
          icon: require("@/static/image/5.png"),
          route: "/refund-list",
          query: {
            status: 0,
          },
        },
      ],
      s_navs: [
        {
          title: "学生手册",
          icon: require("@/static/image/s1.png"),
          route: "/student-list",
        },
        {
          title: "奖励记录",
          icon: require("@/static/image/s2.png"),
          route: "/reward-record",
        },
        {
          title: "住宿记录",
          icon: require("@/static/image/s3.png"),
          route: "/accommodation-records",
        },
      ],
      other_navs: [
        {
          title: "我的积分",
          icon: require("@/static/image/jf.png"),
          route: "/points-record",
        },
        {
          title: "修改密码",
          icon: require("@/static/my/navicon/coupon.png"),
          route: "/coupon-center",
        },
        {
          title: "我的评论",
          icon: require("@/static/image/review.png"),
          route: "/my-review-list",
        },
        {
          title: "在线客服",
          icon: require("@/static/image/kefu.png"),
          route: "",
        },
        {
          title: "意见反馈",
          icon: require("@/static/image/m10.png"),
          route: "/feedback",
        },
        {
          title: "关于我们",
          icon: require("@/static/image/m11.png"),
          route: "/about",
        },
        {
          title: "常见问题",
          icon: require("@/static/image/q.png"),
          route: "/questions",
        },
        {
          title: "核销记录",
          icon: require("@/static/image/q.png"),
          route: "/verification-record",
        },
      ],
      m_navs: [
        {
          title: "扫码核销",
          icon: require("@/static/image/sm.png"),
          route: "/verification-record",
        },
        {
          title: "核销记录",
          icon: require("@/static/image/h.png"),
          route: "/verification-record",
        },
      ],
      m_list: [
        {
          title: "修改密码",
          icon: require("@/static/my/navicon/coupon.png"),
          route: "/coupon-center",
        },
        {
          title: "意见反馈",
          icon: require("@/static/image/m10.png"),
          route: "/feedback",
        },
        {
          title: "关于我们",
          icon: require("@/static/image/m11.png"),
          route: "/about",
        },
        {
          title: "常见问题",
          icon: require("@/static/image/q.png"),
          route: "/questions",
        },
      ],
      type: 0, //0--默认学生 1--门店
    };
  },

  computed: {},

  onLoad(options) {
    this.id = options.id;
    this.setView();
  },
  onShow() {
    this.query_user();
  },
  // onPageScroll(e) {
  // 	console.log('滚动页面', e)
  // 	var scrollTop = e.scrollTop;
  // 	if (scrollTop >= 2) {
  // 		this.show_top_bg = true;
  // 	} else {
  // 		this.show_top_bg = false;
  // 	}
  // },

  onPageScroll(e) {
    console.log(e);
    let percent = e.scrollTop / 40;
    percent = percent < 1 ? percent : 1;

    this.headBackground = `rgba(255,255,255,${percent})`;

    if (e.scrollTop != 0) {
    } else {
      // this.headBackground = ''
    }
  },

  methods: {
    //学生列表跳转
    goPage(k) {
      this.toRoute(this.s_navs[k].route);
    },
    query_user() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "users_userInfo",
        },
      }).then((res) => {
        this.$logjson("个人中心用户信息", res);
        if (res.code == 200) {
          let data = res.data;
          // data.token = data.token;
          // data.userId = data.id;
          //
          this.$store.commit("set_vuex_user", data);

          //商家身份
          let has_mobile = data.ifNeedBindPhone != 1; //是否需要注册用户  ifNeedBindPhone = 1 需要注册
          let has_avatar = !!data.image;
          let has_nick = !!data.nickname;
          if (has_mobile) {
            if (!has_avatar || !has_nick) {
              this.$nextTick(() => {
                this.$refs.avatar_nick_pop.init();
              });
            }
          }

          this.numberInfo = {
            orderNeedPay: data.orderNeedPay,
            orderNeedDelivery: data.orderNeedDelivery,
            orderNeedShouhuo: data.orderNeedShouhuo,
            orderNeedComment: data.orderNeedComment,
            orderRefundNum: data.orderRefundNum,
            orderNeedHexiao: data.orderNeedHexiao,
            orderNum: data.orderNum,
          };
        } else {
          this.$store.commit("remove_vuex_user", false);
        }
      });
    },

    // 头像昵称
    confirmAvatarNick(option) {
      this.query_user();
    },

    setView() {},

    toUser() {
      if (!this.mix_checkLogin()) {
        return;
      }

      // this.toRoute('/my-info')
      if (!this.mix_is_set_phone) {
        this.toRoute({
          path: "/login",
        });
        return;
      } else if (!this.mix_is_set_avatar_nick) {
        this.$nextTick(() => {
          this.$refs.avatar_nick_pop.init();
        });
        return;
      } else {
        this.toRoute("/my-info");
      }
    },

    toUserCenterRoute(path) {
      if (!this.mix_checkLogin()) {
        return;
      }

      if (!this.mix_is_set_phone) {
        this.toRoute({
          path: "/login",
        });
        return;
      } else if (!this.mix_is_set_avatar_nick) {
        this.$nextTick(() => {
          this.$refs.avatar_nick_pop.init();
        });
        return;
      } else {
        this.toRoute(path);
      }
    },

    toNav(item) {
      if (item.title == "在线客服") {
        this.open_kefu();
      } else if (item.title == "关于我们") {
        this.toRoute({
          path: item.route,
        });
      } else {
        if (!this.mix_checkLogin()) {
          return;
        }

        if (!this.mix_is_set_phone) {
          this.toRoute({
            path: "/login",
          });
          return;
        } else if (!this.mix_is_set_avatar_nick) {
          this.$nextTick(() => {
            this.$refs.avatar_nick_pop.init();
          });
          return;
        } else {
          this.toRoute({
            path: item.route,
            query: item.query,
          });
        }
      }
      //  else {
      // 	this.toRoute({
      // 		path: item.route,
      // 		query: item.query
      // 	})
      // }
    },

    open_kefu() {
      this.$refs.kefu_pop.init();
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f8f8f8;
}
</style>

<style lang="scss" scoped>
// 设置标题左对齐
.page-head ::v-deep .u-navbar__content__left {
  display: none;
}

.page-head ::v-deep .u-navbar__content__title {
  flex: 1;
  padding-left: 32rpx;
  text-align: left;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 32rpx;
  color: #000000;
}

// 设置标题左对齐

.page-top-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 404rpx;
  height: 562rpx;
  // background: linear-gradient(180deg, #004281 0%, rgba(110, 204, 142, 0) 100%);

  .head-bg {
    width: 100%;
    height: 100%;
  }
}
.md {
  width: 80rpx;
  height: 32rpx;
  background: #f49c0d;
  border-radius: 4rpx 4rpx 4rpx 4rpx;
  font-weight: 400;
  font-size: 24rpx;
  color: #ffffff;
  text-align: center;
  line-height: 32upx;
  margin-left: 24upx;
}
.page-top {
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  right: 0;
  height: 172rpx;

  &.bg {
    background: #00afeb;
  }

  .page-header {
    padding: 0 32rpx;
    padding-top: 100rpx;

    .menu-area-box {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      justify-content: center;
    }

    .addr-box {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      color: #ffffff;

      // .page-title {
      // 	font-size: 34rpx;
      // 	font-family: PingFang SC-Bold, PingFang SC;
      // 	font-weight: bold;
      // 	color: #000000
      // }

      .header-img {
        width: 213rpx;
        height: 48rpx;
      }
    }

    .head-search {
      margin-top: 28rpx;

      ::v-deep .uicon-search {
        font-size: 40rpx !important;
      }
    }
  }
}

.page {
  .page-ctx {
    position: relative;
    padding: 40rpx 32rpx;
    // padding-top: 160rpx;
    padding-top: 0;

    .ctx-inner {
      // background: #F5F5F5;
    }
  }
}

.user-info {
  width: 100%;
  margin-bottom: 40upx;
  .user-box {
    padding: 40rpx 0;
    display: flex;
    align-items: center;

    .avatar-box {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      overflow: hidden;

      .avatar {
        width: 100rpx;
        height: 100rpx;
      }
    }

    .info-no-login {
      flex: 1;
      overflow: hidden;
      padding-left: 32rpx;

      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 36rpx;
      color: #000000;
    }

    .info-box {
      flex: 1;
      overflow: hidden;
      padding-left: 30rpx;

      .title-box {
        display: flex;
        align-items: center;

        .name {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 32rpx;
          color: #000000;
        }

        .level-marker {
          margin-left: 24rpx;
          width: 36rpx;
          height: 31rpx;

          .level-image {
            width: 36rpx;
            height: 31rpx;
          }
        }

        .level-title {
          margin-left: 10rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 20rpx;
          color: #e2caaa;
        }

        .user-role {
          margin-left: 24rpx;
          padding: 0 12rpx;
          min-width: 70rpx;
          height: 32rpx;
          background: #cb0011;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #ffffff;
        }
      }

      .mobile {
        margin-top: 10rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #000000;
      }
    }

    .setting-box {
      width: 42rpx;
      height: 100rpx;

      image {
        width: 42rpx;
        height: 42rpx;
      }
    }

    .jifen-entry {
      width: fit-content;
      width: 196rpx;
      height: 56rpx;
      background: #ffffff;
      border-radius: 32rpx 0rpx 0rpx 32rpx;

      .jifen-img {
        width: 42rpx;
        height: 42rpx;
      }

      text {
        margin-left: 16rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #164782;
      }
    }
  }

  .entry-box {
    padding: 0 0rpx 16rpx 0rpx;

    .entry-list {
      .entry-item {
        padding: 16rpx 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .title {
          height: 40rpx;
          line-height: 40rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 34rpx;
          color: #000000;
        }

        .text {
          margin-top: 8rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
        }

        .qrcode-box {
          image {
            width: 40rpx;
            height: 40rpx;
          }
        }
      }
    }
  }
}
.qrcode {
  font-size: 24rpx;
  color: #000000;
  image {
    width: 40rpx;
    height: 40rpx;
  }
}
.box-item {
  margin-bottom: 24rpx;
  padding: 30rpx 0 0 0;
  background: #ffffff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;

  .box-inner {
    .nav-wrap {
      flex: 1;
    }
  }
}

.box-title {
  margin-bottom: 10rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #000000;

  .title-text {
  }

  .title-button {
    text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #000000;
    }

    image {
      margin-left: 12rpx;
      width: 30rpx;
      height: 30rpx;
    }
  }
}

.vip-wrap {
  position: relative;
  height: 136rpx;

  .bg-box {
    height: 136rpx;

    image {
      width: 100%;
      height: 136rpx;
    }
  }

  .vip-box {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 24rpx;

    .vip-left {
      .icon-box {
        image {
          margin-right: 16rpx;
          width: 26rpx;
          height: 24rpx;
        }

        text {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #fdc894;
        }
      }

      .tip {
        margin-top: 8rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 20rpx;
        color: #fdc894;
      }
    }

    .vip-right {
      .btn {
        width: 128rpx;
        height: 48rpx;
        background: #fdc894;
        border-radius: 24rpx 24rpx 24rpx 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 20rpx;
        color: #000000;
      }
    }
  }
}
.s-box {
  width: 33%;
  font-weight: 400;
  font-size: 24rpx;
  color: #000000;
  padding-bottom: 36upx;
  padding-top: 10upx;
  & > image {
    width: 54rpx;
    height: 54rpx;
    margin-bottom: 10upx;
  }
}
.m-box {
  width: 50%;
}
.out {
  margin-top: 23upx;
  width: 100%;
  height: 88rpx;
  text-align: center;
  line-height: 88upx;
  background: #ffffff;
  border-radius: 24rpx 24rpx 24rpx 24rpx;
  font-weight: 400;
  font-size: 24rpx;
  color: #a5a8b5;
}
.nav-box-row {
  display: flex;
  flex-wrap: wrap;
  // background: #fff;
  // border-radius: 8rpx 8rpx 8rpx 8rpx;

  &.nav-box-row-3 {
    .nav-item {
      width: 33.3333%;
    }
  }

  &.nav-box-row-5 {
    .nav-item {
      width: 20%;
    }
  }

  .nav-item {
    width: 25%;

    height: 168rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &.hidden {
      display: none;
    }

    .icon-box {
      position: relative;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 54rpx;
      height: 54rpx;

      .num-info {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: -16rpx;
        right: -24rpx;

        min-width: 32rpx;
        height: 22rpx;
        background: #f54242;
        border-radius: 11rpx 11rpx 11rpx 11rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 16rpx;
        color: #ffffff;
      }

      .icon {
        width: 54rpx;
        height: 54rpx;
      }
    }

    .nav-title {
      margin-top: 10rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #000000;
    }
  }
}

// 竖向导航

.nav-wrap {
  margin-top: 16rpx;
  background: #fff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
}

.nav-box-column {
  padding: 20rpx 0;

  .nav-item {
    display: flex;
    align-items: center;
    padding: 20rpx 16px;

    .icon-box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40rpx;
      height: 40rpx;

      .icon {
        width: 40rpx;
      }
    }

    .nav-title {
      flex: 1;
      padding-left: 30rpx;

      .nav-main {
        font-size: 28rpx;
        color: #000000;
      }

      .nav-sub {
        padding-right: 10rpx;
        font-size: 28rpx;
        color: #000000;
      }
    }

    .arrow-box {
      .arrow {
        width: 13rpx;
      }
    }
  }
}
.pop-wrap {
  width: 686rpx;
  padding: 54upx 24upx 0;
  background: #ffffff;
  border-radius: 32rpx 32rpx 32rpx 32rpx;
  .pop-t {
    font-weight: bold;
    font-size: 28rpx;
    color: #000000;
    margin-bottom: 58upx;
    text-align: center;
  }
  .pop-btn {
    & > view {
      width: 310rpx;
      height: 80rpx;
      background: #f49c0d;
      font-weight: bold;
      font-size: 24rpx;
      color: #ffffff;
      text-align: center;
      line-height: 80upx;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
    }
    & > view:nth-of-type(1) {
      background: #f6f6f6;
      color: #9695a3;
    }
  }
}
</style>
